<template>
  <div class="center">
    <el-row class="tac">
      <el-col :span="6">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-vertical-demo"
          @select="handleSelect"
          style="border: 1px solid #e6e6e6"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-promotion"></i>
              <span>发布与下载</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/downloadPublish1"
                >发布应用的基本流程是什么？</el-menu-item
              >
              <el-menu-item index="/downloadPublish2"
                >发布过的应用如何更新版本？</el-menu-item
              >
              <el-menu-item index="/downloadPublish3"
                >发布过的应用如何合并？</el-menu-item
              >
              <el-menu-item index="/downloadPublish4"
                >实名认证有何作用？需要填写哪些材料？</el-menu-item
              >
              <el-menu-item index="/downloadPublish5"
                >如何设置APP相关信息?</el-menu-item
              >
              <el-menu-item index="/downloadPublish6">常见问题</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <!-- <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-order"></i>
              <span>企业签名</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/signatureEnterprise1"
                >如何做苹果企业签名？</el-menu-item
              >
              <el-menu-item index="/signatureEnterprise2"
                >如何更新企业签名？</el-menu-item
              >
              <el-menu-item index="/signatureEnterprise3"
                >应用签名如何续期？</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-s-cooperation"></i>
              <span>TF签名</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/TFEnterprise1"
                >TF签名如何下载？</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-s-check"></i>
              <span>专属签名</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/exclusiveSignature1"
                >专属签名使用教程</el-menu-item
              >
              <el-menu-item index="/exclusiveSignature2"
                >如何获取P8文件的API密钥？</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu> -->
        </el-menu>
      </el-col>
      <el-col
        :span="17"
        style="margin-left: 50px; border: 1px solid #e6e6e6; padding: 1%"
      >
        <router-view />
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: this.$route.path,
    };
  },
  methods: {
    // 防止重复路由报错
    handleSelect(key) {
      if (this.activeIndex == key) return;
      this.activeIndex = key;
      this.$router.push(key);
    },
  },
  // 监听路由变化
  watch: {
    $route(to) {
      this.activeIndex = to.path;
    },
  },
};
</script>

<style lang="scss">
h4 {
  font-size: 18px;
  margin: 10px 0;
  color: #3396e8;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
.title {
  color: #000;
  font-weight: 700;
  padding: 3rem 0 1rem 0;
  font-size: 16px;
}
.paragraph {
  color: #888888;
  font-size: 14px;
  margin: 10px 0;
}
.img {
  width: 100%;
  border: 1px solid #ddd;
}
.appimg {
  width: 50%;
  border: 1px solid #ddd;
}
</style>
